<template>
  <div class="box">
        <div class="box-1">
            <div class="prove">
                <p>手机号认证</p>
            </div>
            <img src="/static/imgs_s07/s07_transparet.png" alt="显示错误" class="img1">
            <div class="pn">
                <span class="phone">手机号</span>
                <span class="number"> 15512356788</span>
            </div>
            <div class="line1"></div>
            <div class="check">
                <span>验证码</span>
                <input type="text" placeholder="请输入验证码">
                <button class="btn1">
                    重新获取（30s）
                </button>
            </div>
            <div class="line2"></div>
            <button class="btn2">
                <p>确定</p>
            </button>
        </div>  
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .box{
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #7F7F7F;
        }
        .box-1{
            position: relative;
            width:290px;
            height:257px;
            background:rgba(255,255,255,1);
            border-radius:12px;
            margin-top: 195px;
        }
        .prove{
            font-size:13px;
            font-family:Source Han Sans CN;
            font-weight:500;
            color:rgba(0,0,0,1);
            margin-top: 22px;
            margin-left: 113px;
        }
        .img1{
            width: 22px;
            height: 22px;
        }
        .box-1 img{
            position: absolute;
            top: 22px;
            right: 22px;
        }
        .pn{
            margin-top: 38px;
            margin-left: 21px;
        }
        .phone{
            font-size:13px;
            font-family:Source Han Sans CN;
            font-weight:500;
            color:rgba(41,43,50,1);
            margin-right: 13px;
        }
        .number{
            font-size:13px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:rgba(0,0,0,1);
        }
        .line1{
            width:251px;
            height:1px;
            background:#E1E1E1;
            border-radius:0px;
            margin-top: 20px;
            margin-left: 20px;
        }
        .check{
            width: 290px;
            margin-top:12px;
            margin-left: 21px;
            margin-right: 17px;
        }
        .line2{
            width:251px;
            height:1px;
            background:#E1E1E1;
            border-radius:0px;
            margin-top: 11px;
            margin-left: 12px;
        }
        .check span{
            font-size:13px;
            font-family:Source Han Sans CN;
            font-weight:500;
            color:rgba(41,43,50,1);
            margin-right: 13px;
        }
        .check input{
            width: 77px;
            font-size:13px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:rgba(163,165,168,1);
            margin-right: 21px;
        }
        .check button{
            width:95px;
            height:30px;
            border:1px solid rgba(225,225,225,1);
            background-color: white;
            border-radius:15px;
            font-size:11px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:rgba(102,102,102,1);
            margin-right: 17px;
            text-align: center;
            line-height: 30px;
        }
        .btn2{
            width:257px;
            height:33px;
            background:rgba(50,177,108,1);
            border-radius:17px;
            margin-top: 7px;
            margin-bottom: 20px;
            margin-left: 17px;
        }
        .btn2 p{
            font-size:13px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:33px;
        }
    </style>
